<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app" class="box">
        <!-- 
            在一个组件中存在多个 需要双向操作的数据变量时，如何通过v-model完成全部绑定功能
        -->
        <h4>父组件</h4>
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <p>info:{{ info }}</p>
        <input type="text" v-model="info">
        <br><br>
        <comp-one v-model="msg" :info="info" @update:info=" info=$event "></comp-one>
        <br>
        <!-- 
            vue2.0 一个组件标签只能定义一个v-model
            vue3.0 v-model 被定义在组件标签上时会启动 : 参数规则，参数后取值为绑定的操作属性名
                    分解
                        1. v-model 无参 默认属性分解 v-bind:model-value；
                           v-model:info 属性分解为 v-bind:info
                        2. v-model 无参 默认事件分解 v-on:update:model-value
                           v-model:info 事件分解 v-on:update:info
        -->
        <comp-one v-model="msg" v-model:info="info"></comp-one>

    </div>

    <script type="text/x-template" id="compOne">
        <div class="box">
            <h4>子组件</h4>
            <p>modelValue:{{ modelValue }}</p>
            <input type="button" value="更新modelValue" @click="upateModelValue()">
            <br>
            <p>info:{{ info }}</p>
            <input type="button" value="更新info" @click="upateInfo()">
        </div>
    </script>

    <script src="../../assets/mock/mock-min.js"></script>
    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                    msg:"默认值msg",
                    info:"默认值info"
                }
            }
        });
        
        app.component("CompOne",{
            template:"#compOne",
            emits:["update:modelValue","update:info"],
            props:{
                modelValue:{
                    default:"",
                    type:String
                },
                info:{
                    default:"",
                    type:String
                }
            },
            methods: {
                upateModelValue() {
                    this.$emit("update:modelValue",Mock.mock("@cword"))
                },
                upateInfo(){
                    this.$emit("update:info",Mock.mock("@cword"))
                }
            },
        })

        app.mount("#app")
    </script>
</body>
</html>